CSSplay

En cualquier menú añadimos esos enlaces que queremos resaltar o los que preferimos dejar como tema aparte y no incluir en las etiquetas. Hay tantos menús donde escoger que a la hora de decidir se presenta un gran problema ¿con algún efecto especial? ¿qué color? ¿en qué lugar lo añado? y ahora que está todo ¿qué enlaces pongo?

Personalmente me gustan los menús sencillos pero también ocurre que hay menús que son la pieza principal del blog, como la guinda del pastel recién horneado, es sólo una opinión a raíz de una tarde visitando páginas y páginas de menús intentando decidirme por alguno.

Y no, no hay menú todavía y seguramente terminará siendo un simple menú tipo texto, a no ser que alguno me encandile antes.

Estuve probando algunos de CSSplay fantástica página donde las haya, en concreto fue el Professional #16 ¿original verdad?

No dije queStu Nicholls es el creador de CSSplay el menú que he probado está preparado para su descarga en un archivo zip en la página del autor.

Una vez lo descargamos extraemos las 5 imágenes, el zip también contiene un archivo con la demo del menú.

Comenzamos extrayendo las imágenes y las subimos a una entrada que más tarde la dejaremos en borrador, de esa forma tendremos las imágenes alojadas en Blogger con la garantía que si Blogger estuviera fuera de servicio no se verían las imágenes pero tampoco el blog por lo tanto no sería problema.

Guardamos la entrada en borrador y nos situamos en plantilla Edición de HTML, justo antes de ]]></b:skin> añadimos lo siguiente:

/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_five */
.preload16 {background: url(pro16/pro16_2.gif);}
.preload16a {background: url(pro16/pro16_2a.gif);}
.pro16 {padding:0 0 0 1em; margin:0; list-style:none; height:43px; position:relative; background:transparent url(pro16/pro16_back.gif) repeat-x left top; font-size:11px;}
.pro16 li {float:left; height:43px;}
.pro16 li a {display:block; float:left; height:40px; line-height:35px; color:#888; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(pro16/pro16_0a.gif) no-repeat;}
.pro16 li a b {float:left; display:block; padding:0 60px 0 0; background:url(pro16/pro16_0.gif) no-repeat right top;}
.pro16 li.current a {color:#000; background:url(pro16/pro16_2a.gif) no-repeat;}
.pro16 li.current a b {color:#000; background:url(pro16/pro16_2.gif) no-repeat right top;}
.pro16 li a:hover {color:#000; background: url(pro16/pro16_2a.gif) no-repeat;}
.pro16 li a:hover b {color:#000; background:url(pro16/pro16_2.gif) no-repeat right top;}
.pro16 li.current a:hover {color:#000; cursor:default;}

En negrita he marcado el lugar donde va la url de cada imagen, tenemos que copiar la url de cada imagen que tenemos en la entrada en borrador y pegarla sustituyendo lo que está marcado en negrita cuidando que coincidan el nombre de la imagen con el sitio donde debemos añadirla (marqué en color rojo para diferenciarlas bien)

Guardamos los cambios y editamos un nuevo gadget ecogiendo HTML/Javascript en su interior añadimos:

<ul class="pro16"><li><a href="#"><b>Enlace 1</b></a></li><li><a href="#"><b>Enlace 2</b></a></li><li><a href="#"><b>Enlace 3</b></a></li><li><a href="#"><b>Enlace 4</b></a></li><li class="current"><a href="#"><b>Enlace 5(queda abierta la pestaña)</b></a></li><li><a href="#"><b>Enlace 6</b></a></li></ul>

Y comenzamos a añadir enlaces, donde Enlace 1- 2- 3- 4- 5- 6- es el texto que hará la función de enlace.

El asterisco # lo sustituimos por la url del sitio que vamos a enlazar ya sea un enlace externo como cualquier parte del blog.

Guardamos los cambios, arrastramos la etiqueta hasta el lugar indicado y listo.

Esto es una imagen, para ver el menú click sobre la imagen